<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        table tr td{
            width: 150px;
            height: 70px;
            border: 1px solid red;
        }
        table{
            border-collapse: collapse;
            margin: 0 auto;

        }
        button{
            width: 60px;
            height: 40px;
            background-color: sandybrown;
        }
        .color{
            background-color: pink;
        }
    </style>
    <script>
        window.onload=function(){
            var btns=document.getElementsByTagName('button');
            var trs=document.getElementsByTagName('tr');
            var tbody=document.getElementsByTagName('tbody')[0];
            //解决添加的一行没有事件绑定
            tbody.onmouseover=function(event){
                console.log(event.target);
                if(event.target.nodeName=='TD'){
                    var tr=event.target.parentNode;
                    tr.style.backgroundColor='pink'

                }else if(event.target.nodeName=='INPUT'){
                    var tr=event.target.parentNode.parentNode;
                    tr.style.backgroundColor='pink'
                }
            }
            tbody.onmouseout=function(event){
                event.target.parentNode.style.backgroundColor=''
            }
            //为每一行添加添加背景色,但此方法对于新添加的一行没有事件绑定，于是采用事件代理
            // Array.prototype.slice.call(trs).forEach(function(item,index,arr){
            //     // console.log(item)
            //     item.onmouseover=function(){
            //         item.style.backgroundColor='pink';
            //     }
            //     item.onmouseout=function(){
            //         item.style.backgroundColor='';
            //     }
            // })
            btns[0].onclick=function(){
                var newTr=document.createElement('tr');
                for(var i=0;i<4;i++){
                    var newTd=document.createElement('td');
                    newTr.appendChild(newTd);
                    if(i==0){
                        var newCheck=document.createElement('input');
                        newCheck.setAttribute('type','checkbox');
                        newTd.appendChild(newCheck);
                    }
                }
                
                tbody.appendChild(newTr);
                

                
            }
            //删除选中行
            var inputs=document.getElementsByTagName('input');
            btns[1].onclick=function(){
                Array.prototype.slice.call(inputs).forEach(function(item,index,arr){
                    if(item.checked){
                        if(confirm('确定删除吗??')){
                            tbody.removeChild(item.parentNode.parentNode);
                        }
                    
                }

                })

            }
        }
    </script>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <button>添加</button>
    <button>删除</button>
</body>
</html>